<template>
  <div>
    <el-button type="primary" @click="dialogVisible = true">添加背景图</el-button>
    <el-table style="margin: 20px 0; width: 100%" :data="list">
      <el-table-column label="图片" width="200" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 150px"
            :src="scope.row.path"
            fit="contain"
            :preview-src-list="srcList"
            :lazy="true"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="上传时间" align="center">
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="deleteImg(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="pagination.current"
        :page-size="pagination.size"
        :total="pagination.total"
        @current-change="handlePageChange"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="添加背景图"
      :visible.sync="dialogVisible"
      width="50%"
      @close="dialogVisible = false"
    >
      <el-form>
        <el-form-item label="背景图">
          <uploadPicture
            style="margin-top: 10px"
            @addPicture="addArticleCover"
            :maxSize="5"
            :maxNumber="1"
          ></uploadPicture>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
const uploadPicture = () => import("../../common/uploadPicture.vue");
export default {
  data() {
    return {
      pagination: {
        current: 1,
        size: 10,
        total: 0,
      },
      list: [],
      query: {
        current: 1,
        size: 10,
      },
      dialogVisible: false,
      srcList: [],
    };
  },
  components: {
    uploadPicture,
  },
  mounted() {
    this.getList();
  },

  methods: {
    getList() {
      this.$createHttp.bgImagePage(this.query).then((res) => {
        if (res.code ===200) {
          this.list = res.data.records;
          this.pagination.total = res.data.total;
          this.list.map((item) => {
            this.srcList.push(item.path);
          });
        }
      });
    },
    addArticleCover(option) {
      let form = {
        filename: option.filename,
        mimeType: option.mimeType,
      };
      this.$createHttp.checkImage(form).then((res) => {
        if (res.code ===200) {
          form.path = option.path;
          this.submit(form);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    submit(form) {
      this.$createHttp.bgImageAdd(form).then((res) => {
        if (res.code ===200) {
          this.dialogVisible = false;
          setTimeout(() => {
            this.getList();
          }, 500);
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    deleteImg(id) {
      this.$confirm("确认删除该背景图？").then(() => {
        this.$createHttp.bgImageDelete({ id: id }).then((res) => {
          if (res.code ===200) {
            this.$message({
              message: "删除成功！",
              type: "success",
            });
            this.getList()
          } else {
            this.$message({
              message: res.msg,
              type: "error",
            });
          }
        });
      });
    },
    handlePageChange(val) {
      this.pagination.current = val;
      this.getList();
    }
  },
};
</script>
<style scoped>
.pagination {
  margin: 20px 0;
  text-align: right;
}
</style>
